﻿


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>CloudBOX | 注册</title>
      <link rel="shortcut icon" href="assets/images/logo_ico.png" type="img/png"/>
      <link rel="stylesheet" href="assets/css/backend.min.css">
      <link rel="stylesheet" href="assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
      <link rel="stylesheet" href="assets/vendor/line-awesome/dist/line-awesome/css/line-awesome.min.css">
      <link rel="stylesheet" href="assets/vendor/remixicon/fonts/remixicon.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/pdf/pdf.viewer.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/PPTXjs/css/pptxjs.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/PPTXjs/css/nv.d3.min.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/SheetJS/handsontable.full.min.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/verySimpleImageViewer/css/jquery.verySimpleImageViewer.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/officeToHtml/officeToHtml.css">
      <link rel="stylesheet" href="assets/vendor/notice/css/bs4.pop.css">
  </head>

  <body class=" ">

    <div id="loading">
          <div id="loading-center">
          </div>
    </div>

      <div class="wrapper">
      <section class="login-content">
         <div class="container h-100">
            <div class="row justify-content-center align-items-center height-self-center">
               <div class="col-md-5 col-sm-12 col-12 align-self-center">
                  <div class="sign-user_card">
                        <img src="assets/images/logo.png" class="img-fluid rounded-normal light-logo logo" alt="logo">
                        <img src="assets/images/logo-white.png" class="img-fluid rounded-normal darkmode-logo logo" alt="logo">
                     <h3 class="mb-3">注 册</h3>
                     <p>创建一个账号.</p>
                     <form>
                        <div class="row">
                           <div class="col-lg-6">
                              <div class="floating-label form-group">
                                 <input class="floating-input form-control" name="username" type="text" id="username" placeholder=" " required>
                                 <label>账号</label>
                              </div>
                           </div>
                           <div class="col-lg-6">
                              <div class="floating-label form-group">
                                 <input class="floating-input form-control" type="password" id="password" name="password" placeholder=" " required>
                                 <label>密码</label>
                              </div>
                           </div>
                           <div class="col-lg-12">
                              <div class="floating-label form-group">
                                 <input class="floating-input form-control" type="tel" id="mobile" name="mobile" placeholder=" " required>
                                 <label>手机号</label>
                              </div>
                           </div>
                           <div class="col-lg-6">
                              <div class="floating-label form-group">
                                 <input class="floating-input form-control" type="text" id="code" name="code" placeholder=" " required>
                                 <label>验证码</label>
                              </div>
                           </div>
                           <div class="col-lg-6">
                              <div class="floating-label form-group">
                                  <button type="button" class="btn btn-primary mt-2" id="msg">获取短信验证码</button>
                              </div>
                           </div>
                           <div class="col-lg-12">
                              <div class="custom-control custom-checkbox mb-3 text-left">
                                 <input type="checkbox" class="custom-control-input" id="customCheck1" required checked disabled>
                                 <label class="custom-control-label" for="customCheck1">我同意遵守互联网净网协议</label>
                              </div>
                           </div>
                        </div>
                        <button type="button" class="btn btn-primary" id="register">注 册</button>
                        <p class="mt-3">
                           已经创建过账号？ <a href="auth-sign-in.html" class="text-primary">登 录</a>
                        </p>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </section>
      </div>


    <script src="assets/js/jquery-1.8.3.min.js"></script>
    <script src="assets/js/backend-bundle.min.js"></script>
    <script src="assets/js/customizer.js"></script>
    <script src="assets/js/chart-custom.js"></script>
    <script src="assets/vendor/doc-viewer/include/pdf/pdf.js"></script>
    <script src="assets/vendor/doc-viewer/include/docx/jszip-utils.js"></script>
    <script src="assets/vendor/doc-viewer/include/docx/mammoth.browser.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/filereader.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/d3.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/nv.d3.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/pptxjs.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/divs2slides.js"></script>
    <script src="assets/vendor/doc-viewer/include/SheetJS/handsontable.full.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/SheetJS/xlsx.full.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/verySimpleImageViewer/js/jquery.verySimpleImageViewer.js"></script>
    <script src="assets/vendor/doc-viewer/include/officeToHtml/officeToHtml.js"></script>
    <script src="assets/js/doc-viewer.js"></script>
    <script src="assets/js/app.js"></script>
    <script src="assets/vendor/notice/js/bs4.pop.js"></script>
    <script src="assets/vendor/notice/bootstrap-4.0.0-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var validCode=true;
        $("#msg").click(function () {
            let mobile = $("#mobile").val();
            let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(mobile)) {
                bs4pop.notice('请输入正确的手机号！', {type: 'danger'});
                $("#mobile").val("");
                return;
            }

            $.ajax({
                url: 'cloud-msg/send',
                type: 'get',
                data: {
                    mobile : $("#mobile").val()
                },
                dataType: 'json',
                success: function (resp) {
                    if (resp.code == 200) {
                        var time = resp.data;
                        var code=$("#msg");
                        if (validCode) {
                            validCode=false;
                            code.prop("disabled", true);
                            var t=setInterval(function  () {
                                time--;
                                code.html(time+"秒");
                                if (time==0) {
                                    clearInterval(t);
                                    code.html("重新获取");
                                    validCode=true;
                                    code.prop("disabled", false);
                                }
                            },1000);
                        }
                    }else {
                        bs4pop.notice(resp.message, {type: 'danger'});
                    }
                }
            });

        });


        $("#username").blur(function () {
            checkUsername();
            return;
        });

        $("#password").blur(function () {
            let password = $("#password").val();
            if (password.length < 6) {
                bs4pop.notice("密码最少不能低于6位！", {type: 'danger'});
                $("#password").val("");
                return;
            }
        });

        $("#mobile").blur(function () {
            let mobile = $("#mobile").val();
            let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(mobile)) {
                bs4pop.notice("请输入正确的手机号！", {type: 'danger'});
                $("#mobile").val("");
                return;
            }
        });


        function checkUsername() {
            $.ajax({
                url: 'cloud-user/check',
                data:{
                    username : $("#username").val()
                },
                type: 'get',
                dataType:'json',
                success:function (result) {
                    if (result.code != 200) {
                        bs4pop.notice(result.message, {type: 'danger'});
                        $("#username").val("");
                    }
                }
            });
        }

        $("#register").click(function () {
            var username = $("#username").val();
            var password = $("#password").val();
            var mobile = $("#mobile").val();
            var code = $("#code").val();
            var customCheck1 = $("#customCheck1").checked;

            if (username == null || username == '') {
                bs4pop.notice("请输入您的账号！", {type: 'danger'});
                return;
            }
            if (password == null || password == '') {
                bs4pop.notice("请输入您的密码！", {type: 'danger'});
                return;
            }
            if (mobile == null || mobile == '') {
                bs4pop.notice("请输入您的手机号！", {type: 'danger'});
                return;
            }
            if (code == null || code =='') {
                bs4pop.notice("请输入短息验证码！", {type: 'danger'});
                return;
            }
            if (customCheck1 == false) {
                bs4pop.notice("请勾选同意遵守互联网协议！", {type: 'danger'});
                return;
            }

            $.ajax({
                url: 'cloud-user/register',
                data: {
                    username : $("#username").val(),
                    password: $("#password").val(),
                    mobile: $("#mobile").val(),
                    code : $("#code").val()
                },
                type: 'post',
                dataType: 'json',
                success : function (result) {
                    if (result.code == 200) {
                        bs4pop.notice("注册成功，前去登陆！", {type: 'success'});
                        location.href="auth-sign-in.html";
                    }else {
                        bs4pop.notice(result.message, {type: 'danger'});
                    }
                }
            });
        });



    </script>

  </body>
</html>